<template>
    <div>
        <header-test name="地址管理" :back="'/cart'"/>
        <div class="address">
            <van-address-list 
                v-model="chosenAddressId"
                :list="addressList"
                :disabled-list="disabledList"
                :disabled-text="disabledList.length?'以下地址超出配送范围':''"
                default-tag-text="默认"
                @add="goToAdd"
                @edit="onEdit"
            />
        </div>
    </div>
</template>

<script>
import HeaderTest from '@/components/HeaderTest.vue';
import { onMounted,reactive,toRefs } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
import { getAddressList } from "@/service/address";
export default {
    setup() {
        const router = useRouter();
        const state = reactive({
            addressList:[],
            disabledList:[],
        });
        onMounted(async()=>{
            const {data} = await getAddressList();
            state.addressList = data.map((item)=>{
                return {
                    id: item.addressId,
                    name:item.useName,
                    tel:item.userPhone,
                    address:item.proviceName +
                    "  " +
                    item.cityName +
                    item.regionName +
                    item.detailAddress,
                    isDefault:item.defaultFlag,
                };
            });
        });
        const onEdit = (params)=>{
            goToAdd({addressId:params.id,type:"edit"});
        };

        const goToAdd = (params)=>{
            const { addressId,type="add" } = params || {};
            router.push({
                path:"/addressForm",
                query: {
                    addressId,
                    type,
                },
            });
        };

        return {
            ...toRefs(state),
            goToAdd,
            onEdit,
        };
    },
    components: {
        HeaderTest,
    },
};
</script>
<style lang="less" scoped>
@import "@/common/style/mixin.less";
.add_btn {
    height: @headerHeight;
    width: 100%;
    padding: 0 1rem;
    box-sizing:border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #d7f7f7;
    .btn {
        background: @primary;
        color: white;
        height: 2.5rem;
        line-height: 2.5rem;
        border-radius: 2rem;
        margin:0.25rem auto;
    }
}

</style>